<!--  -->
<template>
	<div class="lsh-list-box">
		<div class="lsh-top">
			<div
				v-for="(item, index) in list"
				:class="{
					'lsh-list-item': true,
					'lsh-list-item-active': activeId === item.questionId
				}"
				:key="item.questionId"
				@click="hanSelect(item)"
				:id="`${idPre}${item.questionId}`"
				:style="{
					color: item?.color
				}"
			>
				<div>{{ item.num }}</div>
			</div>
		</div>
		<div class="lsh-bottom">
			<div class="lsh-arrow-top" @click="hanChangeBtn(false)">
				<svg-icon name="arrow-top" />
			</div>
			<div class="lsh-arrow-bottom" @click="hanChangeBtn(true)">
				<svg-icon name="arrow-top" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { QuestionNumberItem } from '../../type'
const props = withDefaults(
	defineProps<{
		list: QuestionNumberItem[]
		activeId: string
	}>(),
	{
		list: () => []
	}
)
const emit = defineEmits<{
	(e: 'change', data: QuestionNumberItem): void
}>()
const idPre = 'number-item-'
const hanChangeBtn = (isAdd: boolean) => {
	const list = props.list
	if (list.length === 0) return
	const activeIndex = list.findIndex(
		(item) => item.questionId === props.activeId
	)
	let res = isAdd ? activeIndex + 1 : activeIndex - 1
	if (res < 0) res = 0
	if (res > list.length - 1) res = list.length - 1
	const questionId = list[res].questionId
	emit('change', list[res])
	const doc = window?.rawDocument ?? document
	doc.getElementById(`${idPre}${questionId}`)?.scrollIntoView({
		behavior: 'smooth',
		block: 'nearest'
	})
}
const hanSelect = (data: QuestionNumberItem) => {
	emit('change', data)
}
</script>
<style scoped lang="less">
.lsh-list-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.lsh-top {
		padding: 16px;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;
		gap: 8px;
		.lsh-list-item {
			display: flex;
			height: 32px;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			border-radius: 8px;
			border: 1px solid #e1e5eb;
			font-family: 'PingFang SC';
			font-size: 14px;
			font-weight: 600;
			line-height: normal;
			color: #79828f;
			cursor: pointer;
			&.lsh-list-item-active {
				border-color: #0065ff;
				background: #0065ff;
				color: #fff !important;
			}
		}
	}
	.lsh-bottom {
		border-top: 1px solid #f2f5fa;
		padding: 4px 16px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		align-items: center;
		color: rgba(0, 101, 255, 1);
		.lsh-arrow-top,
		.lsh-arrow-bottom {
			cursor: pointer;
			user-select: none;
			padding: 8px 30px;
			border-radius: 8px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			&:hover {
				background-color: #edf1f7;
			}
		}
		.lsh-arrow-bottom {
			transform: rotate(180deg);
		}
	}
}
</style>
